<template>
  <div class="record">
    <div class="header">
      <h2>约课记录</h2>
    </div>
    <van-tabs v-model="active">
      <van-tab title="待上课"></van-tab>
      <van-tab title="已上课">ee</van-tab>
      <van-tab title="已取消">ww</van-tab>
    </van-tabs>

    <div class="rp-empty">
      <img class="img" src="../../assets/images/no-message.png" />
      <p>请登录后查看相关内容</p>
      <van-button @click="login">登录/注册</van-button>
    </div>
     <Zhezhao></Zhezhao>
    <Footer></Footer>

  </div>
</template>

<script>
  import { Tab, Tabs } from 'vant';
  import { Button } from 'vant';
  import Footer from "../Footer.vue"
  import Zhezhao from "../zhezhao"
  export default {
    name: 'Record',
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Button.name]: Button,
      Footer,
      Zhezhao,
    },
    data() {
      return {
        active: 'a'
      };
    },
    methods:{
      login(){
         this.$router.push("/login")
      }  
    }


  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .record {
    min-height: 100vh;
    background: #f0f2f5;
    box-sizing: border-box;
  }

  .header {
    width: 100%;
    height:40px;
    line-height:40px;
    color: gray;
    background: #fff;
    border-bottom: 1px solid #eee;
  }

  h2 {
    text-align: center;
  }

  .img {
    display: block;
    text-align: center;
    width: 198px;
    height: 143px;
    margin: 26.66667vw auto 2.66667vw;
  }

  p {
    font-size: 0.37333rem;
    font-size: 3.73333vw;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #b7b7b7;
    line-height: 0.53333rem;
    line-height: 5.33333vw;
    margin-bottom: 0.6rem;
    text-align: center;
  }

  button {
    margin: 0 auto;
    display: block;
    width: 2.6rem;
    height: 1rem;
    font-size: 14px;
    color: white;
    background: #eb6100;
    border-radius: 2px;
  }

  /* .rp-empty{

  } */
</style>